<template>
  <div>
    <el-dialog
      :title="$t('MenuManagementLang.Edit')"
      :visible.sync="Visible"
      width="1000px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('MenuManagementLang.Superior_menu')}}:</span
        >
        <span class="Span borderR borderB contant">
          <select-tree
          style="width:100%"
            :placeholder="$t('common.select_plactholder')"
            v-model="data.p_id"
            :options="options"
            :props="defaultProps"
          />
          <!-- <font class="xing">*</font> -->
        </span>
       <span style="text-align: right" class="Span borderR borderB"
          >{{$t('MenuManagementLang.Menu_Name_zh')}}:</span
        >
        <span class="Span borderB contant"
          ><el-input
            class="el"
            ref="m_name_zh"
            @blur="handleBlur('m_name_zh', $event)"
            @focus="handleFocus($event)"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.m_name_zh"
          ></el-input>
          <!-- <font class="xing">*</font> -->
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('MenuManagementLang.Menu_Name_en')}}:</span
        >
        <span class="Span borderR borderB contant"
          ><el-input
            class="el"
            ref="m_name_en"
            @blur="handleBlur('m_name_en', $event)"
            @focus="handleFocus($event)"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.m_name_en"
          ></el-input>
          <!-- <font class="xing">*</font> -->
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('MenuManagementLang.Menu_Name_ru')}}:</span
        >
        <span class="Span borderB contant"
          ><el-input
            class="el"
            ref="m_name_ru"
            @blur="handleBlur('m_name_ru', $event)"
            @focus="handleFocus($event)"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.m_name_ru"
          ></el-input>
          <!-- <font class="xing">*</font> -->
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('MenuManagementLang.Button_icon')}}:</span
        >
        <span class="Span borderR borderB contant">
          <el-select v-model="data.image" :placeholder="$t('common.select_plactholder')">
            <el-option
              v-for="item in optionsImg"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            <img v-if="!!item.value" :src="$baseUrl + item.value" width="20" height="20">
            <span style="margin-left: 10px;">{{ item.label }}</span>
            </el-option>
          </el-select>
          <!-- <font class="xing">*</font> -->
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('MenuManagementLang.Icon_position')}}:</span
        >
        <span class="Span borderB contant">
          <el-select v-model="data.position" :placeholder="$t('common.select_plactholder')">
            <el-option
              v-for="item in optionsPosition"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('MenuManagementLang.link')}}:</span
        >
        <span class="Span borderR borderB contant"
          ><el-input :placeholder="$t('common.input_plactholder')" v-model="data.url"></el-input
        ></span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('MenuManagementLang.sort')}}:</span
        >
        <span class="Span borderB contant">
          <el-input-number
            controls-position="right"
            class="Required"
            size="small" 
            ref="sort" 
            @blur="handleBlur('sort', $event)" 
            @focus="handleFocus($event)" 
            :min="0" 
            :max="100000"  
            :precision="0"
            v-model="data.sort">
          </el-input-number>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('MenuManagementLang.Is_displayed')}}:</span
        >
        <span class="Span borderR borderB contant">
          <el-radio-group
            style="
              padding-top: 3px;
              width: 100%;
              background-color: #ffffe6;
              border: 1px solid #E0E3E9;
            "
            v-model="data.is_hidden"
          >
            <el-radio style="float: left; margin-right: 10px" :label="0"
              >{{$t('MenuManagementLang.visible')}}</el-radio
            >
            <el-radio style="float: left" :label="1">{{$t('MenuManagementLang.hide')}}</el-radio>
          </el-radio-group>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('MenuManagementLang.Permission')}}:</span
        >
        <span class="Span borderB contant"
          ><el-input v-model="data.route"></el-input
        ></span>
        <!-- 最后一层 -->
        <span style="text-align: right" class="Span borderR">{{$t('MenuManagementLang.remarks')}}:</span>
        <span class="Span borderR contant"
          ><el-input v-model="data.remarks"></el-input
        ></span>
        <span style="text-align: right" class="Span borderR"></span>
        <span class="Span contant"></span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
import SelectTree from "../../components/common/selectTree";
export default {
  components: {SelectTree},
  props: {
    // 接收绑定参数
    
  },
  data() {
    return {
      Visible: false,
      data: {},
      confirmTrue: true, //确定按钮保护
      options: [],
      optionsImg: [
        { value: "", label: "无" },
        { value: "/image/add.png", label: "/image/add.png" },
        { value: "/image/edit.gif", label: "/image/edit.gif" },
        { value: "/image/bullet_cross.png", label: "/image/bullet_cross.png" },
        { value: "/image/page_copy.png", label: "/image/page_copy.png" },
        { value: "/image/user_add.png", label: "/image/user_add.png" },
        { value: "/image/user_delete.png", label: "/image/user_delete.png" },
        { value: "/image/split.gif", label: "/image/split.gif" },
        { value: "/image/picture_add.png", label: "/image/picture_add.png" },
        { value: "/image/upload.gif", label: "/image/upload.gif" },
        { value: "/image/excel.gif", label: "/image/excel.gif" },
        { value: "/image/arrow_down.png", label: "/image/arrow_down.png" },
        {
          value: "/image/page_white_paint.png",
          label: "/image/page_white_paint.png",
        },
        { value: "/image/print.gif", label: "/image/print.gif" },
        { value: "/image/lorry.png", label: "/image/lorry.png" },
        { value: "/image/cross.png", label: "/image/cross.png" },
        { value: "/image/package_se.png", label: "/image/package_se.png" },
        { value: "/image/page.png", label: "/image/page.png" },
        {
          value: "/image/text_signature.png",
          label: "/image/text_signature.png",
        },
        { value: "/image/ok.png", label: "/image/ok.png" },

        { value: "/image/calculator.png", label: "/image/calculator.png" },
        { value: "/image/script_save.png", label: "/image/script_save.png" },
        { value: "/image/coins_add.png", label: "/image/coins_add.png" },
        { value: "/image/arrow_undo.png", label: "/image/arrow_undo.png" },
        {
          value: "/image/application_cascade.png",
          label: "/image/application_cascade.png",
        },
        { value: "/image/table.png", label: "/image/table.png" },
        { value: "/image/text_columns.png", label: "/image/text_columns.png" },
        {
          value: "/image/calculator_edit.png",
          label: "/image/calculator_edit.png",
        },

        {
          value: "/image/arrow_in_longer.png",
          label: "/image/arrow_in_longer.png",
        },
        { value: "/image/bell.png", label: "/image/bell.png" },
        { value: "/image/money_yen.png", label: "/image/money_yen.png" },
        { value: "/image/save.gif", label: "/image/save.gif" },

        { value: "/image/arrow_redo.png", label: "/image/arrow_redo.png" },
        { value: "/image/report.png", label: "/image/report.png" },
        { value: "/image/table_key.png", label: "/image/table_key.png" },

        { value: "/image/cart_put.png", label: "/image/cart_put.png" },
        { value: "/image/cart_remove.png", label: "/image/cart_remove.png" },
        { value: "/image/tick.png", label: "/image/tick.png" },
        { value: "/image/cancel.gif", label: "/image/cancel.gif" },

        { value: "/image/undo.gif", label: "/image/undo.gif" },
        { value: "/image/redo.gif", label: "/image/redo.gif" },

        { value: "/image/accept.png", label: "/image/accept.png" },
        { value: "/image/filesave.png", label: "/image/filesave.png" },
        { value: "/image/clear.png", label: "/image/clear.png" },
        { value: "/image/key.png", label: "/image/key.png" },
        { value: "/image/money.png", label: "/image/money.png" },
        { value: "/image/abnormal.png", label: "/image/abnormal.png" },
        { value: "/image/Batch_cancellation.png", label: "/image/Batch_cancellation.png" },
        { value: "/image/cancellation_of_order.png", label: "/image/cancellation_of_order.png" },
        { value: "/image/Configure_discounts.png", label: "/image/Configure_discounts.png" },
        { value: "/image/Delivery.png", label: "/image/Delivery.png" },
        { value: "/image/Input_item_configuration.png", label: "/image/Input_item_configuration.png" },
        { value: "/image/Insurance_configuration.png", label: "/image/Insurance_configuration.png" },
        { value: "/image/Reissue.png", label: "/image/Reissue.png" },
        { value: "/image/Select_customer.png", label: "/image/Select_customer.png" },
        { value: "/image/Service_fee_configuration.png", label: "/image/Service_fee_configuration.png" },
        { value: "/image/Sign_and_receive_for_storage.png", label: "/image/Sign_and_receive_for_storage.png" },
        { value: "/image/Time_efficient_configuration.png", label: "/image/Time_efficient_configuration.png" },
        { value: "/image/View_bill.png", label: "/image/View_bill.png" },
        { value: "/image/View_orders.png", label: "/image/View_orders.png" },
        { value: "/image/View_photos.png", label: "/image/View_photos.png" },
        { value: "/image/View_waybill.png", label: "/image/View_waybill.png" },
      ],
      optionsPosition: [
        { value: 0, label: "页面左侧" },
        // { value: 1, label: "页面上方" },
        { value: 2, label: "页面下方" },
        { value: 3, label: "页面右侧" },
        // { value: 4, label: "第二个tap页面上方" },
        { value: 5, label: "第二个tap页面右侧" },
        { value: 6, label: "第二个tap页面下方" },
      ],
      defaultProps: {
        parent: "p_id", // 父级唯一标识
        value: "m_id", // 唯一标识
        label: "m_name", // 标签显示
        children: "son", // 子级
      },
    };
  },
  created() {
   
  },
  mounted() {},
  watch: {},
  methods: {
    optionPositionChange(){
      let arr =this.optionsPosition.filter(item=>{
          return item.label==this.data.position_name
        })
        this.data.position=arr[0].value
    },
    letterSort(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        if (value1 < value2) {
          return -1;
        } else if (value1 < value2) {
          return 1;
        } else {
          return 0;
        }
      };
    },
    init(data) {
      this.getDataList();
      this.optionsImg=this.optionsImg.sort(this.letterSort('value'))
      this.Visible = true;
      this.m_id = data.m_id;
      this.getData();
    },
    //获取所有数据
    getDataList() {
      this.$get("menulists").then((res) => {
        this.options = res.data;
        this.options.unshift({m_id:0,m_name:' '})
      });
    },
    //获取单条
    getData() {
      this.$get("menuInfo", { m_id: this.m_id }).then((res) => {
        let arr =this.optionsPosition.filter(item=>{
          return item.value==res.data.position
        })
        res.data.position_name=arr[0].label
          this.data = res.data;
      });
    },
    confirm() {
      //是否有空值必选项标识
      let type = true;
      //输入框判断是否有值
      if (!this.data.m_name_zh) {
        this.$refs.m_name_zh.$el.childNodes[1].style.border = "1px solid red";
        type = false;
      }
      if (!this.data.m_name_en) {
        this.$refs.m_name_en.$el.childNodes[1].style.border = "1px solid red";
        type = false;
      }
      if (!this.data.m_name_ru) {
        this.$refs.m_name_ru.$el.childNodes[1].style.border = "1px solid red";
        type = false;
      }
      if(!this.data.sort){
        this.$refs.sort.$el.childNodes[2].childNodes[1].style.border='1px solid red'
        type=false
      }
      if (type && this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000);
        let params = new FormData();
        params.append("p_id", this.data.p_id);
        params.append("m_name_zh", this.data.m_name_zh);
        params.append("m_name_en", this.data.m_name_en);
        params.append("m_name_ru", this.data.m_name_ru);
        params.append("sort", this.data.sort);
        params.append("url", this.data.url);
        params.append("is_hidden", this.data.is_hidden);
        params.append("route", this.data.route);
        params.append("remarks", this.data.remarks);
        params.append("m_id", this.m_id);
        if (this.data.position == "") {
          params.append("position", 0);
        } else {
          params.append("position", this.data.position);
        }
        params.append("image", this.data.image);
        this.$postForm("menuEdit", params).then((res) => {
          this.Visible = false;
          if(res.success){
            this.confirmTrue = true;
            this.$message.success(res.msg);
            this.$emit("success");
          }
        });
      }
    },
    // 失去焦点
    handleBlur(name, event) {
      if (!this.data[name]&&this.data[name]!==0) {
        event.target.style.border = "1px solid red";
      }
    },
    //输入框、下拉框获取焦点边框变色
    handleFocus(event) {
      event.target.style.border = "1px solid #E0E3E9";
    },
    //数字选择器失去焦点边框变色
    handleBlurNumber(name){
      if (this.data[name]==null) {
        this.$refs[name].$el.style.border = "1px solid red";
      }
    },
    //数字选择器获取焦点边框变色
    handleFocusNumber(name){
        this.$refs[name].$el.style.border = "1px solid #E0E3E9";
    },
    //下拉框有值后边框变色
    handleChang(data) {
      this.$refs[data].$el.childNodes[1].childNodes[1].style.border =
        "1px solid #E0E3E9 ";
    },
    // 取消按钮
    cancel() {
      // console.log(0)
      this.Visible = false;
      this.data= {};
      let dom = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
        dom[i].style.border = "1px solid #E0E3E9";
      }
    },
  },
};
</script>

<style scoped lang="less" >
</style>